<template>
    <!-- 搜索栏部分 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="80px" inline>
        <el-form-item label="工序编码">
          <el-input v-model="searchForm.taskCode" placeholder="任务编码" clearable />
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input v-model="searchForm.taskName" placeholder="任务名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表 -->
    <el-card class="table-card">
      <el-radio-group v-model="selectedTaskCode" style="width: 100%">
        <el-table
            :data="taskList"
            border
            stripe
        >
          <el-table-column>
            <template #default="scope">
              <el-radio :value="scope.row.taskCode"/>
            </template>
          </el-table-column>
          <el-table-column prop="taskCode" label="任务编码" />
          <el-table-column prop="taskName" label="任务名称" />
          <el-table-column prop="scheduleQuantity" label="计划生产数量" />
          <el-table-column prop="producedQuantity" label="已生产数量" />
        </el-table>
      </el-radio-group>
    </el-card>

    <!-- 分页栏 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[6, 8, 10, 12]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  <el-row style="margin: 40px">
    <el-button @click="doSelectTask">确定</el-button>
  </el-row>
</template>

<script setup>
//导入

//----------属性申明 ⬇
import {ref,onMounted} from "vue";
import {queryPage} from "@/api/task.js"
//查询表单
const searchForm = ref({
  taskCode:"",
  taskName:"",
})
//数据展示列表
const taskList = ref([])
//返回数据
const selectedTaskCode = ref(-1);
//申明返回事件
//分页数据
const pagination = ref({
  currentPage:1,
  pageSize:6,
  total:0
})
const emit = defineEmits(["selectTask"]);
//----------属性申明 ⬆
//-----------函数申明 ⬇
const handleSizeChange = (size)=>{
  pagination.value.pageSize = size;
  handlerSearch()
}
const handleCurrentChange = (currentPage)=>{
  pagination.value.currentPage = currentPage
  handlerSearch()
}
//搜索列表
const handlerSearch = ()=>{
let params = {}
  params = searchForm.value
  params.pageNum = pagination.value.currentPage
  params.size = pagination.value.pageSize
  queryPage(params).then(res =>{
    taskList.value = res.data.list;
    pagination.value.total = res.data.total
  })
}
//重置查询列表
const resetSearch = ()=>{
  searchForm.value = {
    taskCode:"",
    taskName:"",
  }
}
const doSelectTask = ()=>{
  emit("selectTask",selectedTaskCode.value)
}
//加载数据
onMounted( ()=>{
  resetSearch()
  handlerSearch();
})
//------------函数申明 ⬆

</script>

<style scoped>

</style>